<template>
  <div id="all">
    <el-row>
      <el-col :span="4" v-for=" (item,index) in list3" style="margin:10px">
        <el-card :body-style="{ padding: '20px',}" class="card">
          <img :src=" './json/img/' + item.productImage " class="image">
          <div style="padding: 14px;">
            <span>{{ item.productName }}</span>
            <div class="left clearfix">
                ￥{{item.salePrice}}
            </div>
            <el-button type="text" class="button">操作按钮</el-button>
          </div>
        </el-card>
      </el-col>
<!--      <el-col :span="4" v-for=" (item,index) in list1" style="margin:10px">-->
<!--        <el-card :body-style="{ padding: '20px',}" class="card">-->
<!--          <img :src=" './json/img/' + item.productImage " class="image">-->
<!--          <div style="padding: 14px;">-->
<!--            <span>{{ item.productName }}</span>-->
<!--            <div class="left clearfix">-->
<!--              ￥{{item.salePrice}}-->
<!--            </div>-->
<!--            <el-button type="text" class="button">操作按钮</el-button>-->
<!--          </div>-->
<!--        </el-card>-->
<!--      </el-col>-->
<!--      <el-col :span="4" v-for=" (item,index) in list2" style="margin:10px">-->
<!--        <el-card :body-style="{ padding: '20px',}" class="card">-->
<!--          <img :src=" './json/img/' + item.productImage " class="image">-->
<!--          <div style="padding: 14px;">-->
<!--            <span>{{ item.productName }}</span>-->
<!--            <div class="left clearfix">-->
<!--              ￥{{item.salePrice}}-->
<!--            </div>-->
<!--            <el-button type="text" class="button">操作按钮</el-button>-->
<!--          </div>-->
<!--        </el-card>-->
<!--      </el-col>-->
    </el-row>
  </div>
</template>
<script>
export default {
  name: '',
  props: {},
  data() {
    return {
      list: [],
      list1: [],
      list2: [],
      list3: [],
      currentDate: new Date()
    };
  },
  // 子组件转换
  components: {},
  // 数据引入
  mounted() {
    this.$axios({url: 'json/data.json'}).then(res => {
      // console.log(res.data.result.list)
      this.list = res.data.result.list
      this.list3=this.list3.concat(res.data.result.list)
    })
    this.$axios({url: 'json/data2.json'}).then(res => {
      // console.log(res.data.result.list)
      this.list1 = res.data.result.list
      this.list3=this.list3.concat(res.data.result.list)

    })
    this.$axios({url: 'json/data3.json'}).then(res => {
      // console.log(res.data.result.list)
      this.list2 = res.data.result.list
      this.list3=this.list3.concat(res.data.result.list)
      console.log(this.list3)
    })
  },
  created() {
  },
  //点击函数事件
  methods: {},
  //计算事件
  computed: {},
  //数据监听
  watch: {},
  //过滤器
  filters: {},
  //设定自定义指令
  directives: {},
}
</script>
<style lang="scss" scoped>
#all{
  font-size: .1rem;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
/deep/ {
  .el-col:hover{
    box-shadow: 2px 2px 10px 2px #fd6f00;
  }
}
</style>